<template>
  <div class="youshi">
    <div class="layitem_warp_whie">
      <h4>{{ youshiap.title }}</h4>
    </div>

    <!-- WhatsApp客服系统的优势 -->
    <div class="whatsapp_warp tydisplay">

      <div class="whatsapp_item" v-for="(item,i) in youshiap.list" :key="i">
        <div class="whatsapp_item_img">
          <img :src="item.imgurl" alt="" />
        </div>
        <h4>{{item.name}}</h4>
        <p>{{item.content}}</p>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "youshi",
  props: ["youshiap"],
};
</script>

<style scoped>
/* WhatsApp拓客系统优势 */

.layitem_warp_whie {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 40px;
}

.layitem_warp_whie > h4 {
  font-size: 38px;
  color: #1d2845;
  text-align: center;
}
/* WhatsApp客服系统的优势 */
.tydisplay {
  display: flex;
}
.whatsapp_warp {
  margin: 40px auto;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 850px;
}

.whatsapp_item {
  width: 290px;
  text-align: center;
  padding: 15px 0;
}

.whatsapp_item_img > img {
  width: 130px;
}

.whatsapp_item > h4 {
  font-size: 18px;
  color: #1d2845;
  margin: 15px;
}

.whatsapp_item > p {
  font-size: 14px;
  color: #7b8697;
  line-height: 21px;
}
</style>